/** flex布局 */

/**
*  ——————-
* |   ●   |
* |   ●   |
*  ——————-
*/

.top-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/**
  *  ——————-
  * |●      |
  * |●      |
  *  ——————-
  */

.left-line {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/**
  *  ——————-
  * | ●   ● |
  * |       |
  *  ——————-
  */

.both-sides {
  display: flex;
  justify-content: space-between;
}

/**
  *  ————————-
  * |         |
  * |    ●    |
  * |         |
  *  ————————-
  */

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


/**
  *  ————————-
  * |         |
  * |   ● ●   |
  * |         |
  *  ————————-
  */
.both-sides-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/**
*  ——————-
* |     ● |
* |     ● |
*  ——————-
*/
.right-line {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

/**
  *  ————————-
  * |  ●   ●  |
  * |         |
  * |  ●   ●  |
  *  ————————-
  */
.topToBottom {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

/**
  *  ————————-
  * | ● ●     |
  * |         |
  * |         |
  *  ————————-
  */
  .both-left-center {
    display: flex;
    align-items: center;
  }